<template>
  <div class="hawkContent">
    <hawk-breadcrumb></hawk-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="4" style="display: flex; align-items: center">
        <span style="width:100px;">业务系统</span>
        <el-input placeholder="请输入业务系统名称搜索" v-model="queryForm.query.name">
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="hawkSearch" @click="init(true)">搜索</el-button>
        <el-button plain @click="reSet">重置</el-button>
      </el-col>
      <el-col :span="4"
              style="float: right; text-align: right; padding-right: 30px">
      </el-col>
    </el-row>

    <hawk-table :table-data="tableData" :page="queryForm.page" :number="true"
                :selection="false" :options="[
        { key: 'name', label: '业务系统名称',width: 300 },
        { key: 'hostCount', label: '主机数量' ,width: 200},
        { key: 'handle', label: '操作' ,width:200},
      ]">
      <template #handle="{ row }">
        <!-- <span class="hawk-text-btn" @click="editBusiness(row)">编辑</span> -->
        <!-- <span class="hawk-text-divider">|</span> -->
        <span class="hawk-text-btn" @click="goViewport(row)">查看视图</span>
      </template>
    </hawk-table>

    <div class="bottom-btns">
      <div class="bottom-btns-left">
        <div class="bottom-btns-left-num">
          <!-- {{ multipleSelection.length }} 选择 -->
        </div>
        <!-- <el-button type="hawkDelete">批量删除</el-button>
        <el-button plain>导出</el-button> -->
      </div>
      <el-pagination background @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="queryForm.page.current"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="queryForm.page.size"
                     layout=" prev, pager, next,sizes" :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="formTitle" :visible.sync="addDialogVisible"
               :close-on-click-modal="false" @close="addDialogClosed">
      <!-- 内容主题区 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef"
               label-width="120px" label-position="top">
        <el-form-item label="业务系统名称" prop="name">
          <el-input :readonly="formTitle == '查看业务系统'" v-model="addForm.name">
          </el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/**
 * @author 肖帅
 * @description 业务系统的视图层
 * @api /cmdb-business(后端接口地址)
 * @since 2021-10-10 17:30
 * @update 2021-11-26 15:00
 * @modifier 韩梦远
 * @bug
 * @version V1.0.0
 */
import { getList, doEdit, isBusExists } from '@/api/assets/list/business'

import { getList as getAllBusCI } from '@/api/assets/ci/room'

export default {
  //import引入的组件需要注入到对象中才能使用",
  data () {


    let inHaveName = async (rule, value, callback) => {

      let ret = await isBusExists(value)
      console.log(ret);

      if (ret.code == 998) {
        callback()
      } else {
        callback(new Error('名称已经存在'))
      }

    }

    return {
      tableData: [],
      formTitle: '添加业务系统',
      addDialogVisible: false,
      multipleSelection: [],
      addForm: {
        name: '',
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入业务名称', trigger: 'blur' },
          { validator: inHaveName, trigger: 'blur' }

        ],
      },
      queryForm: {
        query: {
          name: '',
        },
        page: {
          current: 1,
          size: 10,
        },
      },
      total: 0,

      ciBusList: [] // 有视图的 业务 列表

    }
  },
  //监听属性 类似于data概念",
  computed: {
    cellStyle () {
      return {
        padding: '8px 0',
      }
    },
  },
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    async init (type) {
      if (type) this.queryForm.page.current = 1
      const res = await getList(this.queryForm)
      console.log(res)
      this.tableData = res.data.records
      this.total = res.data.total
    },
    reSet () {
      this.queryForm = this.$options.data().queryForm
      this.init()
      this.multipleSelection = []
    },
    // goView(row) {
    //   this.$router.push({ name: 'monitorHost', params: { id: row.id, type: 1 } })
    // },
    goViewport (row) {
      console.log(row.id)
      // this.$router.push({ name: 'item', params: { id: row.id, type: 1 } })
      console.log(row);


      let destCI = this.ciBusList.find(item => {
        return item.busid == row.id
      })
      console.log(destCI);
      if (destCI == undefined) {
        this.$msg({
          type: 'warn',
          message: '所选机房没有视图'
        })
        return
      }

      this.$router.push({
        name: 'businessCIName',
        // params: { id: row.id, type: 1 },
        params: destCI,
      })

      
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      console.log(val)
      this.queryForm.page.size = val
      this.init()
    },
    handleCurrentChange (val) {
      this.queryForm.page.current = val
      this.init()
    },
    save () {
      this.$refs.addFormRef.validate(async (valid) => {
        // console.log(valid)
        if (!valid) return
        if (this.addForm.name) {

          const res = await doEdit(this.addForm)
          console.log(res);

          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: res.message
            })
          } else {
            this.$message({
              type: 'waring',
              message: '编辑失败'
            })
          }
        }
        this.addDialogVisible = false
        this.init()
      })
    },
    editBusiness (row, name) {
      // if (!row) {
      //   this.formTitle = '添加业务系统'
      // } else {
      //   if (name) {
      //     this.formTitle = '查看业务系统'
      //     this.addForm = Object.assign({}, row)
      //   } else {
      this.formTitle = '编辑业务系统'
      this.addForm = Object.assign({}, row)
      // }
      // }
      this.addDialogVisible = true
    },

    addDialogClosed () {
      this.addForm = this.$options.data().addForm
      this.addDialogVisible = false
      this.$refs.addFormRef.resetFields()
    },

    async getCIBusList () {
      const ret = await getAllBusCI({
        query: {
          name: '',
          type: 1
        },
        page: {
          current: 1,
          size: 10000
        }
      })

      console.log(ret);

      if (ret.code == 20000) {

        let ciList = ret.data

        this.ciBusList = []
        // 根据视图列表，获得有 视图的 机房列表
        for (let i = 0; i < ciList.length; i++) {
          let nodeList = ciList[i].nodeList // nodeList 中只有一个是机房

          for (let node of nodeList) {
            if (node.nodeType == 'sys') {
              this.ciBusList.push({
                busid: node.viewData.id, // 业务ID
                busName: node.viewData.name,
                ciId: ciList[i].id, // 视图ID
                ciName: ciList[i].name, // 视图名字
                ciName2: ciList[i].ciName, // 视图名字

              })
            }
          }
        }

        console.log(this.ciRoomList);
      }





    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate () { },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created () {
    this.init()

    this.getCIBusList()


  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted () { },
}
</script>
